<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>login_pwd</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        #loginPage {
            background: url(../../image/loginBg.png) no-repeat center;
            background-size: 100% 100%;
        }

        .logintitle {
            height: 69px;
            text-align: center;
            margin: 57px 0 134px;
        }

        .login-third {
            margin-top: 3rem;
        }

        .login-input {
            text-indent: 5px;
            letter-spacing: 2px;
            font-size: 17px!important;
        }

        .aui-list {
            background-color: rgba(255, 255, 255, 0);
        }

        .aui-list .aui-list-item {
            font-size: 17px;
            margin: 0 0 0px 28px;
            height: 56px;
            line-height: 56px;
            padding-left: 0;
            border-bottom: 1px solid rgba(204, 204, 204, .2);
            background-image: -webkit-linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
            background-image: linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
        }
        .aui-list.aui-form-list .aui-list-item:active {
            background-color: rgba(255, 255, 255, 0);
        }
        .aui-btn-info.aui-active, .aui-btn-info:active {
            color: #fff !important;
            background-color: rgba(255, 255, 255, 0) !important;
        }
        .aui-grid [class*=aui-col-xs-]:active {
            background-color: rgba(245, 245, 245, 0);
        }
        @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
            .aui-list {
                background-image: linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
            }
        }

        .aui-btn-block {
            width: 90%;
            margin: 0 auto;
        }

        .aui-content-padded.login-third {
            margin: 0;
        }

        .loginOpert .creatOrforget {
            padding: 0.2rem 0;
            color: #969696;
        }

        .loginOpert .creatOrforget:first-child {
            text-align: left;
            padding-left: 29px;
        }

        .loginOpert .creatOrforget:last-child {
            text-align: right;
            padding-right: 29px;
        }

        .logintitle span {
            width: 34px;
            height: 69px;
            background: url(../../image/loginName@2x.png) no-repeat center;
            background-size: 100%;
        }

        .loninBtnse {
            margin-top: 83px;
        }

        .loninBtn {
            height: 40px!important;
            line-height: 40px!important;
            width: 245px;
            background: url(../../image/loginBtn@2x.png) no-repeat center;
            background-size: 100%;
            background-color: rgba(255, 255, 255, 0) !important;
        }

        .getVilidCode {
            font-size: 17px;
            color: #141414 !important;
            background-color: rgba(255, 255, 255, 0)!important;
        }

        .aui-list.aui-form-list {
            border-top: none!important;
            letter-spacing: 2px;
        }
        .forgetPwd{
          font-size: 17px;
          color: #000;
          text-align: right;
          padding: 30px 29px 0 263px;
          letter-spacing: 2px;
        }
        /*适配屏幕320px*/

        @media (max-width: 320px) {
            .loninBtn {
                height: 27px!important;
                line-height: 27px!important;
                width: 163px;
            }
            .logintitle span {
                width: 23px;
                height: 64px;
            }
            .logintitle {
                margin: 38px 0 90px;
            }
            .aui-list .aui-list-item {
                height: 47px;
                line-height: 47px;
            }
            .loninBtnse {
                margin-top: 69px;
            }
            .aui-list .aui-list-item,
            .login-input,
            .getVilidCode,
            .loginOpert .creatOrforget,
            .forgetPwd {
                font-size: 12px!important;
            }
          .forgetPwd{
              padding: 20px 29px 0 183px;
            }
        }
        @media (min-width: 414px) {
            .loninBtn{
              height: 47px!important;
              line-height: 47px!important;
              width: 263px;
            }
          }
        /*适配屏幕320px*/
    </style>
</head>

<body>
    <div id="loginPage" v-bind:style="{height:wHeight}">
        <section class="aui-content aui-margin-t-15">
            <h1 class="logintitle"><span></span></h1>
            <ul class="aui-list aui-form-list ">
                <li class="aui-list-item">
                    <div class="aui-list-item-label  color-orange">
                        手机号
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input type="tel" placeholder="请输入手机号" ref="mobileNum" id="mobile"  class="login-input"  v-on:change="getPhoneValue()">
                                         <!-- pattern="[0-9]*" -->
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label color-orange">
                        密码
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input aui-padded-l-10" style="padding-right: 15px;">
                            <input type="password"  placeholder="请输入密码"  ref="password" id="code" class="login-input" v-on:change="getVilidCodeValue()">
                            <!-- pattern="^1[345678][0-9]{9}$" -->
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <section>
            <p class="forgetPwd"  v-on:click="gotoResetPwd()" >忘记密码</p>
        </section>
        <section class="aui-content-padded loninBtnse">
            <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm loninBtn" v-on:click="loginOperate()"></div>
        </section>
        <section class="aui-content-padded login-third loginOpert">
            <div class="aui-grid" style="background: none;">
                <div class="aui-row">
                    <div class="aui-col-xs-6 creatOrforget"  v-on:click="gotoLogincode()">
                        验证码登录
                    </div>
                    <div class="aui-col-xs-6 creatOrforget"  v-on:click="gotoRegist()">
                        创建账号
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
      api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    var usertokenData = $api.getStorage('tokenData');
    var userInfotokenData = $api.getStorage('userInfo');
    ////初始化页面
    var app = new Vue({
        el: '#loginPage',
        data: {
            wHeight: '',
            phoneNum : '',
            password : '',
            getText : '点击获取',
            countryCode : '+86',
            //custmoerType : $api.getStorage('customerType'),
            //userInfo :  $api.getStorage('userInfo'),
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            /////输入手机号获得值
            getPhoneValue : function(){
               this.phoneNum = this.$refs.mobileNum.value;
               $api.setStorage('resetPhone', this.phoneNum);
            },
            /////输入密码值
            getVilidCodeValue : function(){
               this.password = this.$refs.password.value;
            },
              /////点击登录按钮
            loginOperate : function(){
                api.showProgress({
                    title: '',
                    text: '正在登录...',
                    modal: false
                });
                    setTimeout(function(){
                       login.loginOperateMethod();
                    },500)
                  // api.hideProgress();//关闭等待框
                  //   bf_common_view.bf_win.popToast('您还没注册，请先注册吧！');
                  //
            },
              /////点击创建账号
            gotoRegist : function(){
              login.gotoRegistMethod();
            },
              /////点击验证码登录
            gotoLogincode : function(){
               login.gotoLogincodeMethod();
            },
            gotoResetPwd : function(){
              login.gotoResetPwd();
            }
        },
        mounted:function(){
            this.init();
        }
    });
    //////登录
    var login = {
        ////点击登录按钮操作
        loginOperateMethod : function(){
            $c.ajax({
                url: 'http://dev-m-api.jiucaig.com/index.php?l=zh-cn&s=/Api/Login/login',////手机号加密码登录/////成功调用
                method:'post',
                values:{
                    phone : app.phoneNum,////电话号码
                    password :  app.password//////密码
                },
                success: function(ret) {
                  //console.log(JSON.stringify(ret));
                  api.hideProgress();//关闭等待框
                    if(ret) {
                        $api.setStorage('tokenData', ret);
                        login.initUserInfo(ret.user_id);
                        api.sendEvent({
                           name: 'isLogin',
                           extra: {
                               key: ret
                           }
                         });
                    }
                },
                err:function(err){
                  api.hideProgress();//关闭等待框
                  bf_common_view.bf_win.popToast(err.body.errmsg);
                  console.log(JSON.stringify(err));
                }
            });
        },
        /////点击打开注册页面
        gotoRegistMethod : function(){
            bf_common_view.bf_win.openWin('custmoerRegist', '../');
            setTimeout(function(){
                api.closeWin({name: 'login_pwd'});
            },800)
        },
        /////点击打开验证码登录页面
        gotoLogincodeMethod : function(){
            bf_common_view.bf_win.openWin('login_code', '../login/');
            setTimeout(function(){
                api.closeWin({name: 'login_pwd'});
            },800)
        },
        /////点击打开忘记密码页面
        gotoResetPwd :function(){
            bf_common_view.bf_win.openWin('login_resetPwd', '../login/');
            setTimeout(function(){
                api.closeWin({name: 'login_pwd'});
            },800)
        },
        /////查询用户是否存在
        initUserInfo : function (userid){
               $c.ajax({
                   url: 'User/getUser',
                   method:'post',
                   values:{
                       userId : userid
                   },
                   need_login : true ,
                   success: function(ret) {
                     if(ret) {
                       console.log(JSON.stringify(ret)+"正在查询");
                       api.sendEvent({
                          name: 'isRegist',
                          extra: {
                              key: ret
                          }
                        });
                       if(ret.usertype == undefined||ret.usertype == ''||ret.usertype == null){
                            bf_common_view.bf_win.openWin('regist', '../');
                            setTimeout(function(){
                                api.closeWin();
                            },800)
                       }else{
                         //console.log('已注册')
                           api.closeToWin({
                               name: 'root'
                           });
                           setTimeout(function(){
                               api.closeWin();
                           },800)
                       }
                     }
                   },
                   err:function(err){
                    console.log(JSON.stringify(err));
                   }
               });
           }
    };
</script>

</html>
